<template>
  <div class="app-main-container">
    <div class="app-main-title">{{ $t('message.rlfxtbtj') }}</div>
    <div class="doumee-filter">
      <el-date-picker
        v-model="filters.time"
        value-format="yyyy-MM-dd"
        type="daterange"
        :range-separator="$t('message.zhi')"
        :start-placeholder="$t('message.mrdt')"
        style="width: 300px"
        :end-placeholder="$t('message.mrdt')"
        :picker-options="pickerOptions"
        :clearable="false"
        @blur="dateIndex = 0"
      />
      <div class="flex tabDate">
        <!-- <div :class="dateIndex === 1 ?'on':''" @click="getDate(1)">{{ $t('message.zuor') }}</div> -->
        <div :class="dateIndex === 2 ?'on':''" @click="getDate(2)">{{ $t('message.beizhou') }}</div>
        <div :class="dateIndex === 3 ?'on':''" @click="getDate(3)">{{ $t('message.beiyue') }}</div>
      </div>
      <el-button v-preventReClick type="primary" @click="getDataList">{{ $t('message.cx') }}</el-button>
    </div>
    <div id="echarts" />

  </div>
</template>

<script>

import { crowdedAllCountb } from '@/api'
import { getFMdate } from '@/utils/index'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: this.$t('message.jin7'),
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 6)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: this.$t('message.jin30'),
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 29)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: this.$t('message.jin60'),
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: this.$t('message.jin90'),
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 89)
            picker.$emit('pick', [start, end])
          }
        }],
        disabledDate(time) {
          var curDate = new Date()
          var preDate = new Date(curDate.getTime()) // 前一天
          return time.getTime() > preDate
        }
      },
      list: [],
      dateIndex: 1,
      filters: {},
      weekList: []
    }
  },
  created() {
    this.setDate(new Date())
    this.getDate(2)
    this.getDataList()
  },
  methods: {
    getDataList() {
      crowdedAllCountb({
        param: {
          startDay: this.filters.time[0] + ' 00:00:00',
          endDay: this.filters.time[1] + ' 23:59:59',
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.getChartData()
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    getDate(e) {
      this.dateIndex = e
      if (e === 1) {
        this.$set(this.filters, 'time', [getFMdate(-1, '-').slice(0, 10), getFMdate(-1, '-').slice(0, 10)])
      } else if (e === 2) {
        this.$set(this.filters, 'time', [this.weekList[0].value, this.weekList[6].value])
      } else {
        var date = new Date()
        var year = date.getFullYear() + '-'
        var month = this.calculation(date.getMonth() + 1) + '-'
        var day = new Date(date.getFullYear(), date.getMonth() + 1, 0)
        this.$set(this.filters, 'time', [year + month + '01', year + month + day.getDate()])
      }
    },
    calculation(s) {
      return s < 10 ? '0' + s : s
    },
    formatDate(date) {
      const year = date.getFullYear() + '-'
      const month = this.calculation(date.getMonth() + 1) + '-'
      const day = this.calculation(date.getDate())
      const week = [this.$t('message.z7', this.$t('message.z1'), this.$t('message.z2'), this.$t('message.z3'), this.$t('message.z4'), this.$t('message.z5'), this.$t('message.z6'))][date.getDay()]
      return {
        label: month + day + ' ' + week,
        value: year + month + day,
        old: new Date(date)
      }
    },
    addDate(date, n) {
      date.setDate(date.getDate() + n)
      return date
    },
    setDate(date) {
      var week = date.getDay() - 1
      if (week === -1) {
        week = 6
      }
      date = this.addDate(date, week * -1)
      this.currentDate = new Date(date)
      const arr = []
      for (var i = 0; i < 7; i++) {
        arr[i] = this.formatDate(i === 0 ? date : this.addDate(date, 1))
      }
      this.weekList = arr
      console.log(11, arr)
    },
    getChartData() {
      var chartDom = document.getElementById('echarts')
      var myChart = echarts.init(chartDom)
      var option
      const dataList = this.list
      option = {
        xAxis: {
          type: 'category',
          data: dataList.map((item) => { return item.day })
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: this.$t('message.jin'),
            type: 'line',
            stack: 'Total',
            data: dataList.map((item) => { return item.dataIn })
          }
          // ,
          // {
          //   name: this.$t('message.chu'),
          //   type: 'line',
          //   stack: 'Total',
          //   data: dataList.map((item) => { return item.dataOut })
          // }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>
<style scoped lang="scss">
.tabDate {
  display: flex;
  margin-right: 10px;
  margin-bottom: 10px;
  div {
    background-color: #F5F7FA;
    color:#111111;
    display: inline-block;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    cursor: pointer;
    &:nth-of-type(2){
      border-left: 1px solid #DCDFE6;
      border-right: 1px solid #DCDFE6;
    }
    &.on {
      color: #fff;
      background-color: #435EBE;
    }
  }
}
#echarts {
  width: 100%;
  height: 500px;
}
</style>
